<template>
  <!-- 顶部导航栏 -->
  <header class="top-navbar" :class="themeClass">
    <div class="navbar-container" :style="{ maxWidth: maxWidth }">
      <div class="left-section">
        <div class="logo" @click="navigateTo('/')">F</div>
        <div class="title-section">
          <span class="project-name">Front_Yue</span>
          <span class="separator">|</span>
          <span class="function-name">{{ functionName }}</span>
        </div>
      </div>
      <div class="center-section">
        <!-- 可以添加导航菜单或面包屑 -->
        <slot name="center"></slot>
      </div>
      <div class="nav-actions">
        <slot name="actions">
          <div v-if="userInfo" class="user-info-container">
            <div class="user-avatar">
              <img v-if="userInfo.avatar" :src="userInfo.avatar" alt="用户头像">
              <img v-else src="@/assets/image/app/logo.png" alt="用户头像">
            </div>
            <el-dropdown trigger="click">
              <span class="dropdown-link">
                <span class="user-name">{{ userInfo?.nickname || '用户' }}</span>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="navigateTo('/person-center',true)">个人中心</el-dropdown-item>
                  <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <button v-else class="login-button" @click="navigateTo('/login',true)">登录</button>
        </slot>
      </div>
    </div>
  </header>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue';
import { useRouter } from 'nuxt/app';
import { getCookie, removeCookie } from '~/utils/storage';

const router = useRouter();
const userInfo = ref(null);

const props = defineProps({
  // 功能名称
  functionName: {
    type: String,
    default: '智能AI助手'
  },
  // 主题色: blue, purple, teal, rose, amber
  theme: {
    type: String,
    default: 'blue',
    validator: (value) => ['blue', 'purple', 'teal', 'rose', 'amber', 'light'].includes(value)
  },
  // 最大宽度
  maxWidth: {
    type: String,
    default: '1400px'
  }
});
// 根据主题生成对应的CSS类名
const themeClass = computed(() => `theme-${props.theme}`);
// 获取用户信息
const getUserInfo = () => {
  if (typeof window !== 'undefined') {
    const user = getCookie('fy_userInfo');
    if(user!==null){
      userInfo.value = JSON.parse(user);
    }else{
      userInfo.value = null;
    }
  }
};

// 退出登录
const handleLogout = () => {
  removeCookie('fy_userInfo');
  removeCookie('fy_token');
  userInfo.value = null;
  ElMessage({
    message: '已退出登录',
    type: 'success'
  });
};
// 页面导航
const navigateTo = (path,isExternal = false) => {
  if(isExternal){
    window.open("https://yueguichao.cn"+ path, '_self');
  }else{
    router.push(path);
  }
  router.push(path);
};

// 组件挂载时获取用户信息
onMounted(() => {
  getUserInfo();
  // 添加storage事件监听，以便在其他标签页更新用户信息时同步
  window.addEventListener('storage', (e) => {
    if (e.key === 'userInfo') {
      getUserInfo();
    }
  });
});
</script>

<style lang="scss" scoped>
// 顶部导航栏样式
.top-navbar {
  color: white;
  padding: 0;
  height: 60px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  width: 100%;
  position: relative;
  overflow: hidden;
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  .navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    position: relative;
    z-index: 2;
  }
  .left-section {
    display: flex;
    align-items: center;
    min-width: 220px;

    .logo {
      width: 36px;
      height: 36px;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: bold;
      margin-right: 12px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        background-color: rgba(255, 255, 255, 1);
        transform: translateY(-2px);
      }
    }

    .title-section {
      display: flex;
      align-items: center;
      font-size: 16px;
      letter-spacing: 0.3px;

      .project-name {
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      }

      .separator {
        margin: 0 10px;
        opacity: 0.7;
      }

      .function-name {
        opacity: 0.9;
        font-weight: 500;
        padding: 2px 8px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 6px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        letter-spacing: 0.5px;
      }
    }
  }

  .center-section {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .nav-actions {
    min-width: 120px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 5px;
    position: relative;
    z-index: 5;

    .login-button {
      background-color: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: white;
      padding: 6px 18px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

      &:hover {
        background-color: rgba(255, 255, 255, 0.28);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      &:active {
        transform: translateY(0);
      }
    }

    .user-info-container {
      display: flex;
      align-items: center;
      cursor: pointer;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 20px;
      padding: 4px 12px 4px 4px;
      transition: all 0.2s ease;
      
      &:hover {
        background-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid rgba(255, 255, 255, 0.7);
        margin-right: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
        
        &:hover {
          border-color: rgba(255, 255, 255, 0.9);
          transform: scale(1.05);
        }
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;
          
          &:hover {
            transform: scale(1.1);
          }
        }
      }

      .user-name {
        font-size: 14px;
        font-weight: 500;
        margin-right: 4px;
      }

      .dropdown-link {
        color: rgba(255, 255, 255, 0.8);
        padding: 4px;
        cursor: pointer;

        &:hover {
          color: white;
        }
      }
    }
  }
}

// 蓝色主题 (默认)
.theme-blue {
  background: linear-gradient(90deg, rgba(51, 112, 255, 0.85) 0%, rgba(79, 135, 255, 0.85) 100%);
  border-bottom: 1px solid rgba(51, 112, 255, 0.2);

  .logo {
    color: #3370ff;
  }
}

// 亮白主题
.theme-light {
  background: #ffffff;
  border-bottom: 1px solid #eaeaea;
  color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  .logo {
    color: #3370ff;
    background-color: #f5f8ff;
    box-shadow: 0 2px 6px rgba(51, 112, 255, 0.08);
    border: 1px solid rgba(51, 112, 255, 0.1);
    font-weight: 700;
    
    &:hover {
      background-color: #edf2ff;
      box-shadow: 0 4px 8px rgba(51, 112, 255, 0.12);
    }
  }

  .title-section {
    .project-name {
      color: #333;
      font-weight: 600;
    }
    
    .separator {
      color: #c0c4cc;
    }
    
    .function-name {
      color: #606266;
      background-color: rgba(245, 247, 250, 0.7);
      border: 1px solid #eaeaea;
      letter-spacing: 1px;
      padding: 3px 10px;
      border-radius: 8px;
      box-shadow: none;
      font-weight: 500;
    }
  }
  
  .nav-actions {
    .login-button {
      background-color: #edf2ff;
      border: 1px solid #d8e3ff;
      color: #3370ff;
      
      &:hover {
        background-color: #d8e3ff;
      }
    }
    
    .user-info-container {
      background-color: #f5f8ff;
      border: 1px solid #eaeaea;
      
      .user-avatar {
        border-color: #ffffff;
      }
      
      .user-name {
        color: #333;
      }
      
      .dropdown-link {
        color: #606266;
        
        &:hover {
          color: #333;
        }
      }
    }
  }
}

// 紫色主题
.theme-purple {
  background: linear-gradient(90deg, rgba(122, 54, 207, 0.85) 0%, rgba(157, 86, 232, 0.85) 100%);
  border-bottom: 1px solid rgba(122, 54, 207, 0.2);

  .logo {
    color: #7a36cf;
  }
}

// 蓝绿色主题
.theme-teal {
  background: linear-gradient(90deg, rgba(13, 148, 136, 0.85) 0%, rgba(20, 184, 166, 0.85) 100%);
  border-bottom: 1px solid rgba(13, 148, 136, 0.2);

  .logo {
    color: #0d9488;
  }
}

// 玫瑰色主题
.theme-rose {
  background: linear-gradient(90deg, rgba(225, 29, 72, 0.85) 0%, rgba(244, 63, 94, 0.85) 100%);
  border-bottom: 1px solid rgba(225, 29, 72, 0.2);

  .logo {
    color: #e11d48;
  }
}

// 琥珀色主题
.theme-amber {
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.85) 0%, rgba(245, 158, 11, 0.85) 100%);
  border-bottom: 1px solid rgba(217, 119, 6, 0.2);

  .logo {
    color: #d97706;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .top-navbar {
    .navbar-container {
      padding: 0 12px;
    }

    .left-section {
      .title-section {
        font-size: 14px;
      }
    }

    .nav-actions {
      .user-info-container {
        padding: 2px 8px 2px 2px;

        .user-name {
          max-width: 60px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>